<template>
  <div class="goods-filter">
    <sa-search :filterParams="filterParams" @filterBack="filterBack">
      <template #end>
        <el-form-item label="带货等级">
          <div class="sa-flex">
            <el-input v-model="goods.data.commerce_level_range.min" placeholder="请输入"></el-input>
            <span class="space">至</span>
            <el-input v-model="goods.data.commerce_level_range.max" placeholder="请输入"></el-input>
          </div>
        </el-form-item>
        
      </template>
    </sa-search>
  </div>
</template>
<script setup>
  import { onMounted, reactive } from 'vue';
  import { cloneDeep } from 'lodash';

  const emit = defineEmits(['filterBack']);
  const props = defineProps(['filterParams']);

  const fp = cloneDeep(props.filterParams);

  const goods = reactive({
    data: {
      commerce_level_range: fp.data.commerce_level_range,
    },
    conditionLabel: {},
  });

  function initLabel(data) {
    if (goods.data.commerce_level_range.min && goods.data.commerce_level_range.max) {
      goods.conditionLabel.commerce_level_range = `${props.filterParams.tools.commerce_level_range.label}:${goods.data.commerce_level_range.min} - ${goods.data.commerce_level_range.max}`;
    }
    
  }

  function filterBack(redata) {
    initLabel();

    if (redata.event == 'confirm') {
      for (let f in goods.data) {
        redata.data.data[f] = goods.data[f];
        if (goods.conditionLabel[f]) redata.data.conditionLabel[f] = goods.conditionLabel[f];
      }
    }

    if (redata.event == 'reset') {
      redata.data.data.commerce_level_range = props.filterParams.tools.commerce_level_range.value;

      delete redata.data.conditionLabel.commerce_level_range;
    }

    emit('filterBack', redata);
  }

  onMounted(() => {
    initLabel();
  });
</script>
<style lang="scss" scoped>
  .goods-filter {
    color: var(--sa-font);
    width: 100%;
    .space {
      margin: 0 12px;
    }
  }
</style>
